<template>
    <div class="city-input">
        <div class="input-wrapper">
          <input type="text" placeholder="请输入城市名字" v-model="cityName"/>
          <span class="search-icon" @click="search">🔍</span>
        </div>
      </div>
</template>

<script>
/*https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key} */
/*http://api.openweathermap.org/geo/1.0/direct?q={city name},{state code},{country code}&limit={limit}&appid={API key} */
//在这里要使用Axios来获取数据
import axios from 'axios'
export default{
    name:'weathersearch',
    data(){
        return {
            cityName: '', // 用于存储输入的城市名称
        }
    },
    methods: {
      search(){
        if (this.cityName.trim() === '') {
          alert('请输入城市名称');
          return;
        }
        const apiKey =  "6b6aa37a6e2b3ed5dd652be1a92b716e"
        const apiUrlGetLatAndLon=`http://api.openweathermap.org/geo/1.0/direct?q=${this.cityName}&appid=${apiKey}`

        console.log('搜索城市:', this.cityName);
        // 在这里可以添加调用 API 的逻辑

        //根据城市名字获取经纬度
        axios.get(apiUrlGetLatAndLon).then(
          response => {
            //拿到一个数组，数组第一个元素是我们需要的城市数据
            const cityData = response.data[0];
            if (cityData) {
              const lat = cityData.lat; // 纬度
              const lon = cityData.lon; // 经度
              console.log('获取的城市数据:', cityData);
              console.log('纬度:', lat, '经度:', lon);
              // 这里可以继续使用 lat 和 lon 来获取天气数据
              this.getWeatherData(lat, lon, apiKey);
            } else {
              console.error('未找到该城市的经纬度信息');
            }
          },
          error => {
            console.error('获取城市数据时出错:', error);
          }
        )
      },
      getWeatherData(lat, lon, apiKey) {
        const apiUrlGetWeather = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${apiKey}&units=metric`;
        axios.get(apiUrlGetWeather).then(
          response => {
            //console.log('获取的天气数据:', response.data);
            // 处理天气数据
             //获取，天气 温度，湿度，风速，气压

            const weatherData ={
              //城市名称
              cityName: this.cityName,
              //温度
              temp: response.data.main.temp,
              //湿度
              humidity: response.data.main.humidity,
              //风速
              windSpeed: response.data.wind.speed,
              //气压
              grndLevel: response.data.main.grnd_level,

              //是否展示天气组件
              isShowWeather: true,
            }
           
            console.log('天气数据:', weatherData);

            //使用全局事件总线
            this.$bus.$emit('displayWeatherData', weatherData);

          },
          error => {
            console.error('获取天气数据时出错:', error);
          }
        );
      },

    },
}
</script>

<style scoped>
.city-input {
        margin-bottom: 20px;
        position: relative;
      }

      .input-wrapper {
        position: relative;
        display: inline-block;
        width: 100%;
      }

      .city-input input {
        padding: 10px 15px;
        padding-right: 40px; /* 为图标留出空间 */
        border: 1px solid #ddd;
        border-radius: 25px;
        width: 100%;
        font-size: 16px;
        outline: none;
        transition: border-color 0.3s ease;
        box-sizing: border-box; /* 修复可能的宽度问题 */
      }

      .city-input input:focus {
        border-color: #74b9ff;
      }

      .search-icon {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 16px;
        color: #b2bec3;
        cursor: pointer; /* 鼠标悬停时变成小手 */
        transition: color 0.3s ease;
      }

      .search-icon:hover {
        color: #0984e3; /* 鼠标悬停时改变颜色 */
      }
      .search-icon:active {
        transform: translateY(-50%) scale(0.9); /* 按下时缩小 */
        color: #636e72; /* 按下时改变颜色 */
      }
</style>